<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>川乌知识通关游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f0f8ff;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .run-button-container {
            text-align: center;
            margin: 30px 0;
        }
        #run-game {
            padding: 15px 40px;
            background-color: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
        }
        #run-game:hover {
            background-color: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(59, 130, 246, 0.3);
        }
        .game-container {
            display: none;
            width: 100%;
            max-width: 700px;
        }
        .game-box {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            padding: 30px;
        }
        .game-title {
            text-align: center;
            color: #2c5282;
            margin-bottom: 30px;
            font-size: 26px;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 15px;
        }
        .level {
            display: none;
        }
        .level.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        @keyframes fadeIn {
            from {opacity: 0; transform: translateY(10px);}
            to {opacity: 1; transform: translateY(0);}
        }
        .level-name {
            color: #3182ce;
            font-size: 20px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .level-name span {
            background-color: #3182ce;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-size: 16px;
        }
        .question {
            font-size: 18px;
            color: #2d3748;
            margin-bottom: 25px;
            line-height: 1.5;
        }
        .option-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 30px;
        }
        .option {
            padding: 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            color: #4a5568;
            transition: all 0.3s;
        }
        .option:hover {
            border-color: #3182ce;
            background-color: #f7fafc;
        }
        .option.selected {
            border-color: #22c55e;
            background-color: #f0fdf4;
        }
        .feedback {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 25px;
            font-size: 16px;
            display: none;
            align-items: center;
        }
        .feedback.correct {
            display: flex;
            background-color: #dcfce7;
            color: #166534;
            border: 1px solid #bbf7d0;
        }
        .feedback.wrong {
            display: flex;
            background-color: #fee2e2;
            color: #b91c1c;
            border: 1px solid #fecdd3;
        }
        .thumb-icon {
            font-size: 24px;
            margin-right: 10px;
        }
        .next-btn {
            padding: 12px 35px;
            background-color: #3182ce;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: none;
            margin: 0 auto;
        }
        .next-btn.active {
            display: block;
        }
        .next-btn:hover {
            background-color: #2563eb;
        }
        .result-page {
            text-align: center;
            padding: 40px 20px;
            display: none;
        }
        .result-page.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        .success-icon {
            font-size: 60px;
            color: #22c55e;
            margin-bottom: 20px;
        }
        .fail-icon {
            font-size: 60px;
            color: #f59e0b;
            margin-bottom: 20px;
        }
        .result-title {
            font-size: 28px;
            margin-bottom: 15px;
        }
        .success-title {
            color: #166534;
        }
        .fail-title {
            color: #b45309;
        }
        .result-desc {
            font-size: 18px;
            color: #4a5568;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        .restart-btn {
            padding: 12px 35px;
            background-color: #22c55e;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .restart-btn:hover {
            background-color: #16a34a;
        }
        .try-again-btn {
            padding: 12px 35px;
            background-color: #f59e0b;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .try-again-btn:hover {
            background-color: #d97706;
        }
    </style>
</head>
<body>
    <!-- 运行游戏按钮 -->
    <div class="run-button-container">
        <button id="run-game">运行川乌知识通关游戏</button>
    </div>

    <!-- 游戏内容容器 -->
    <div class="game-container">
        <div class="game-box">
            <h1 class="game-title">川乌知识通关挑战（药用植物学习）</h1>

            <!-- 关卡1：性状鉴别 -->
            <div class="level level-1 active" data-level="1">
                <h2 class="level-name"><span>1</span>关卡1：川乌性状鉴别</h2>
                <p class="question">以下哪项是川乌（生品）的典型性状特征？（注：川乌为中药材，需在专业指导下使用）</p>
                <div class="option-list">
                    <div class="option" data-answer="A">A. 表面黄棕色，有多数点状根痕，断面类白色，富粉性</div>
                    <div class="option" data-answer="B">B. 表面棕褐色，有“钉角”，断面多角形，形成层环纹明显</div>
                    <div class="option" data-answer="C">C. 表面黑色，质坚硬，断面黑色，气微香</div>
                    <div class="option" data-answer="D">D. 表面白色，质脆，断面白色，味甜</div>
                </div>
                <div class="feedback"></div>
                <button class="next-btn" data-next="2">下一关</button>
            </div>

            <!-- 关卡2：化学成分 -->
            <div class="level level-2" data-level="2">
                <h2 class="level-name"><span>2</span>关卡2：川乌化学成分</h2>
                <p class="question">川乌的主要活性及毒性化学成分是？（注：川乌含毒性成分，需炮制后在专业医师指导下使用）</p>
                <div class="option-list">
                    <div class="option" data-answer="A">A. 双酯型生物碱类（如乌头碱、次乌头碱）</div>
                    <div class="option" data-answer="B">B. 黄酮类（如芦丁）</div>
                    <div class="option" data-answer="C">C. 皂苷类（如人参皂苷）</div>
                    <div class="option" data-answer="D">D. 挥发油类</div>
                </div>
                <div class="feedback"></div>
                <button class="next-btn" data-next="3">下一关</button>
            </div>

            <!-- 关卡3：毒性提示 -->
            <div class="level level-3" data-level="3">
                <h2 class="level-name"><span>3</span>关卡3：川乌安全提示</h2>
                <p class="question">关于川乌的安全使用注意事项，正确的是？</p>
                <div class="option-list">
                    <div class="option" data-answer="A">A. 毒性极弱，可直接生用内服</div>
                    <div class="option" data-answer="B">B. 主要毒性成分为乌头碱，过量或生用易致不良反应，严禁生用内服，需遵医嘱</div>
                    <div class="option" data-answer="C">C. 仅对皮肤有刺激性，外用无风险</div>
                    <div class="option" data-answer="D">D. 无毒，可随意内服</div>
                </div>
                <div class="feedback"></div>
                <button class="next-btn" data-next="4">下一关</button>
            </div>

            <!-- 关卡4：炮制方法 -->
            <div class="level level-4" data-level="4">
                <h2 class="level-name"><span>4</span>关卡4：川乌炮制方法</h2>
                <p class="question">川乌为降低毒性，常用的炮制方法是？（注：炮制需由专业人员操作）</p>
                <div class="option-list">
                    <div class="option" data-answer="A">A. 煮法（加甘草、黑豆等辅料长时间煮制）</div>
                    <div class="option" data-answer="B">B. 直接晒干法</div>
                    <div class="option" data-answer="C">C. 高温油炸法</div>
                    <div class="option" data-answer="D">D. 反复水洗法</div>
                </div>
                <div class="feedback"></div>
                <button class="next-btn" data-next="result">查看结果</button>
            </div>

            <!-- 通关成功页 -->
            <div class="result-page success-page">
                <div class="success-icon">🎉</div>
                <h2 class="result-title success-title">恭喜通关！</h2>
                <p class="result-desc">太棒了！你已经了解了川乌的基本知识点。请注意：川乌为有毒中药材，实际使用必须严格遵循专业医师指导，切勿自行使用。</p>
                <button class="restart-btn">再玩一次</button>
            </div>

            <!-- 未通关页 -->
            <div class="result-page fail-page">
                <div class="fail-icon">💪</div>
                <h2 class="result-title fail-title">继续加油！</h2>
                <p class="result-desc">虽然完成了所有题目，但部分知识点还需巩固。重要提示：川乌为有毒中药材，实际使用必须严格遵循专业医师指导，切勿自行使用。</p>
                <button class="try-again-btn">重新挑战</button>
            </div>
        </div>
    </div>

    <script>
        // 运行游戏按钮功能
        document.getElementById('run-game').addEventListener('click', function() {
            this.style.display = 'none'; // 隐藏按钮
            document.querySelector('.game-container').style.display = 'block'; // 显示游戏
        });

        // 游戏核心数据
        const gameConfig = {
            correctAnswers: {1: "B", 2: "A", 3: "B", 4: "A"},
            wrongTips: {
                1: {
                    A: "错误哦！‘表面黄棕色、断面富粉性’是附子（部分规格）的特征，并非川乌～",
                    C: "错误哦！‘表面黑色、断面黑色’多为制川乌或其他黑色药材特征，生川乌表面为棕褐色～",
                    D: "错误哦！川乌表面非白色，且具有刺激性味道（有毒，严禁口尝），绝非味甜～"
                },
                2: {
                    B: "错误哦！黄酮类（如芦丁）常见于槐花、荞麦等植物，不是川乌的主要成分～",
                    C: "错误哦！皂苷类（如人参皂苷）是人参、三七等药材的核心成分，川乌不含此类～",
                    D: "错误哦！挥发油类多存在于薄荷、肉桂等芳香药材中，川乌主要成分不是挥发油～"
                },
                3: {
                    A: "错误哦！川乌毒性较强，生用内服会引发严重健康风险，绝对不可直接生用～",
                    C: "错误哦！川乌外用也需控制剂量和时间，皮肤破损时外用可能导致不良影响，存在风险～",
                    D: "错误哦！川乌含乌头碱类有毒成分，具有明确毒性，不可随意内服～"
                },
                4: {
                    B: "错误哦！直接晒干无法破坏乌头碱类毒性成分，不能起到减毒作用～",
                    C: "错误哦！高温油炸不是川乌的法定炮制方法，还可能破坏有效成分～",
                    D: "错误哦！反复水洗仅能去除少量水溶性杂质，无法去除乌头碱，达不到减毒目的～"
                }
            },
            currentLevel: 1,
            hasMistake: false // 记录是否有答错的题目
        };

        // 选项点击事件
        const allOptions = document.querySelectorAll(".option");
        allOptions.forEach(option => {
            option.addEventListener("click", function() {
                const level = this.closest(".level").dataset.level;
                const selectedAnswer = this.dataset.answer;
                const levelEl = document.querySelector(`.level-${level}`);
                const feedbackEl = levelEl.querySelector(".feedback");
                const nextBtn = levelEl.querySelector(".next-btn");

                // 移除同关卡其他选项选中状态
                levelEl.querySelectorAll(".option").forEach(opt => opt.classList.remove("selected"));
                // 添加当前选项选中状态
                this.classList.add("selected");

                // 判断对错并显示反馈
                if (selectedAnswer === gameConfig.correctAnswers[level]) {
                    feedbackEl.className = "feedback correct";
                    feedbackEl.innerHTML = `<span class="thumb-icon">👍</span> 回答正确！${
                        level === "1" ? "精准掌握川乌性状要点～" :
                        level === "2" ? "准确抓住川乌核心化学成分～" :
                        level === "3" ? "清晰了解川乌安全使用风险～" :
                        "完全掌握川乌炮制减毒要点～"
                    }`;
                    // 显示下一步按钮
                    nextBtn.classList.add("active");
                } else {
                    // 记录有错误
                    gameConfig.hasMistake = true;
                    feedbackEl.className = "feedback wrong";
                    feedbackEl.textContent = gameConfig.wrongTips[level][selectedAnswer];
                    // 隐藏下一步按钮，必须重新选择
                    nextBtn.classList.remove("active");
                }
            });
        });

        // 下一步按钮事件
        const allNextBtns = document.querySelectorAll(".next-btn");
        allNextBtns.forEach(btn => {
            btn.addEventListener("click", function() {
                const nextTarget = this.dataset.next;
                const currentLevelEl = document.querySelector(`.level-${gameConfig.currentLevel}`);

                // 隐藏当前关卡
                currentLevelEl.classList.remove("active");

                if (nextTarget === "result") {
                    // 显示结果页
                    if (!gameConfig.hasMistake) {
                        // 全对显示通关页面
                        document.querySelector(".success-page").classList.add("active");
                    } else {
                        // 有错误显示鼓励页面
                        document.querySelector(".fail-page").classList.add("active");
                    }
                } else {
                    // 显示下一关
                    gameConfig.currentLevel = nextTarget;
                    document.querySelector(`.level-${nextTarget}`).classList.add("active");
                }
            });
        });

        // 重新挑战按钮事件
        document.querySelector(".restart-btn").addEventListener("click", restartGame);
        document.querySelector(".try-again-btn").addEventListener("click", restartGame);

        // 重置游戏函数
        function restartGame() {
            // 隐藏结果页
            document.querySelectorAll(".result-page").forEach(page => {
                page.classList.remove("active");
            });
            // 重置错误记录
            gameConfig.hasMistake = false;
            // 重置所有选项和反馈
            document.querySelectorAll(".level").forEach(level => {
                level.querySelectorAll(".option").forEach(opt => opt.classList.remove("selected"));
                level.querySelector(".feedback").style.display = "none";
                level.querySelector(".next-btn").classList.remove("active");
            });
            // 显示第一关
            gameConfig.currentLevel = 1;
            document.querySelector(".level-1").classList.add("active");
        }
    </script>
</body>
</html>